<template>
	<scroll-view scroll-y="true" style="height: 100vh;text-align: center;" class="bg-white" refresher-enabled="true"
		:refresher-triggered="triggered" @refresherrefresh="onRestore">
		<view style="margin-bottom:0px;z-index: 200;" class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" type="text" placeholder="请输入对应的搭子社群" confirm-type="search" v-model="SearchContent"/>
			</view>
			<view class="action">
				<button class="cu-btn bg-cyan" @click="Search">搜索</button>
			</view>
		</view>

		<image class="pipei-card" src="http://8.146.208.139:4000/avator/1715353730500.png" mode="aspectFit"
			style="width: 100%; z-index: 300; height: 20vh; padding: 5px;" @click="ToPubilc"></image>

		<!-- <scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == TabCur ? 'text-orange cur' : ''" v-for="(item, index) in 4"
					:key="index" @tap="tabSelect" :data-id="index">
					Tab{{ index }}
				</view>
			</view>
		</scroll-view> -->
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == TabCur ? 'text-black cur' : ''" style="z-index: 202;"
					v-for="(item, index) in TagList" @click="tabSelect(item, index)" :key="index">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>
		<img style="position: absolute;top: 0%;left: 0;width: 100%;" class="bg"
			src="https://obscloud.ulearning.cn/resources/web/17156029272242677.png" />

		<view class="CardList">
			<view class="CommuntyCart" v-for="item in CommuntyList" @click="GoComminity(item)">
				<div class="black-brackground"></div>
				<view class="FontGroup">
					<h3 style="color: rgba(255, 255, 255, 1);">{{ item.name }}</h3>
					<h5 style="color: rgba(255, 255, 255, 1);margin-top: 15px;opacity: 0.7;;">{{ item.label }}</h5>
				</view>
				<view class="headGroup"
					style="width: 100vw;display: flex;vertical-align: middle;height: 3vh;line-height: 5vh;">
					<!-- <view class="cu-avatar-group">
						<view class="cu-avatar round sm" v-for="it in item.ImgList"
							:style="'background-image:url(' + it + ');'">
						</view>
					</view> -->
					<h5 style="color: white; font-weight: 400;opacity: 0.7;margin-left: 4rem;"><span>{{
			item.membersCount }}</span>人在内
					</h5>
				</view>
			</view>
			<!-- 创建社群 -->
			<view @click="CreateCommunity" class="CommuntyCart"
				style="background: url('http://8.146.208.139:4000/avator/1715532027264.png');background-size: cover;">
				<div class="black-brackground"></div>

				<h2 class="text-white">创建社群</h2>
				<button class="cu-btn block bg-white lg" style="width: 10vw;margin:0 auto; opacity: 0.8;">
					<text style="color: #FFC300; font-size: 80rpx; font-weight: 900;">+</text>
				</button>
			</view>
		</view>

	</scroll-view>
	<view class="cu-modal show" v-if="show" style="z-index: 300;">
		<view class="cu-dialog" style="border-radius: 12px;">
			<view class="padding-xl bg-white">
				<h3 style="margin-bottom: 10px;">创建社群</h3>
				<view class="cu-form-group">
					<view class="title">名称</view>
					<input placeholder="请输入名称" name="input" v-model="name" />
				</view>
				<view class="cu-form-group">
					<view class="title">介绍</view>
					<textarea placeholder="请输入介绍" name="textarea" v-model="introduce" />
				</view>
				<view class="cu-form-group">
					<view class="title">标签</view>
					<input placeholder="请输入标签" name="input" v-model="type" />
				</view>
				<view class="cu-form-group">
					<view class="title">类别</view>
					<picker @change="PickerChange" :value="index" :range="picker_name" style="z-index: 9999;">
						<view class="picker" style="text-align: center;">
							{{ index > -1 ? picker_name[index] : '请选择类别' }}
						</view>
					</picker>
				</view>
				<view style="width: 100%;height: 50rpx;display: flex;margin-top: 10px;">
					<view class="text-black" style="width: 50%;" @click="close">
						<h3>取消</h3>
					</view>
					<view class="text-blue" style="width: 50%;" @click="sure">
						<h3>提交</h3>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import {
	ref,
	onMounted
} from 'vue'
import {
	createCommunity,
	getCategoryType,
	getCommunityList,
	getMyCommunty
} from '@/store/api.js'
const getTypeList = () => {
	getCategoryType().then(res => {
		TagList.value = []
		picker.value = res.data.data.rows
		TagList.value.push({
			name: '所有',
			id: ''
		})
		res.data.data.rows.forEach(item => {
			picker_name.value.push(item.name)
			TagList.value.push({
				name: item.name,
				id: item.id
			})
		})
		TagList.value.push({
			name: '我的',
			id: '-1'
		})
		getCommunty(TagList.value[TabCur.value]['id'])
	}).catch(err => {
		console.log(err)
	})
}
const tabSelect = (item, index) => {
	TabCur.value = index
	if (item.id == -1) {
		//获取个人
		getMy()
	} 
	else {
		console.log(item.id)
		getCommunty(item.id)
	}
}
const show = ref(false);
// const show_true = true;
const TagList = ref([])
const getMy = () => {
	getMyCommunty(1, 20).then(res => {
		console.log('获取个人社群')
		console.log(res)
		CommuntyList.value = res.data.data.rows
		myCommunity.value = res.data.data.rows
	}).catch(err => {
		console.log(err)
	})
}
const close = () => {
	show.value = false
}
const PickerChange = (e) => {
	index.value = e.detail.value;
}
// const overlayStyle = {
// 	zIndex: 200 // 遮罩层 z-index 层级
// }
const TabCur = ref(0)
const index = ref(-1)
const name = ref('')
const introduce = ref('')
const type = ref('')
const picker = ref([])
const picker_name = ref([])
const myCommunity = ref([])
const sure = () => {
	if (name.value != '' && introduce.value != '' && type.value != '' && index.value != -1) {
		uni.showLoading({
			title: '创建中'
		})
		let data = {
			name: name.value,
			label: type.value,
			introduction: introduce.value,
			categoryId: picker.value[index.value]['id']
		}
		createCommunity(data).then(res => {
			console.log(res)
			uni.hideLoading()
			show.value = false
			uni.showToast({
				icon: 'success',
				title: '创建成功！'
			})
			onRestore()
			index.value = -1
			name.value = ''
			type.value = ''
			introduce.value = ''
		}).catch(err => {
			console.log(err)
			uni.hideLoading()
			show.value = false
			uni.showToast({
				icon: 'fail',
				title: '创建失败！'
			})
		})
	} else {
		uni.showToast({
			icon: 'error',
			title: '请勿留空！'
		})
	}
}
const CommuntyList = ref([{
	id: '',
	name: '大学生闲聊',
	label: '以前闲聊一下',
	ImgList: [
		'https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg',
		'https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg',
		'https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg'
	],
	membersCount: 20
}])

const GoComminity = (item) => {
	let t = 0
	if (myCommunity.value.find(it => it.id == item.id)) {
		t = 1
	}
	console.log('看是否加入')
	console.log(t)
	uni.navigateTo({
		url: `/subpkg/CommuntyDetail/CommuntyDetail?id=${item.id}&if=${t}`
	})
}

const CreateCommunity = () => {
	show.value = true
}

const ToPubilc = (e) => {
	uni.switchTab({
		url: '/pages/Public/Public'
	})
}
const SearchContent=ref('')
const Search=()=>{//搜索
	getCommunityList('',SearchContent.value).then(res => {
		console.log(res)
		TabCur.value=0
		CommuntyList.value = res.data.data.rows
		SearchContent.value=''
	})
	
}
const getCommunty = (id) => {
	getCommunityList(id,'').then(res => {
		console.log(res)
		CommuntyList.value = res.data.data.rows
	})
}
onMounted(async () => {
	getTypeList();
	// Mycommunity();
	getMyCommunty(1, 20).then(res => {
		console.log('获取个人社群')
		console.log(res)
		myCommunity.value = res.data.data.rows
	}).catch(err => {
		console.log(err)
	})
});

// 定义响应式数据
const triggered = ref(false)

// onRestore 方法
const onRestore = async () => {
	triggered.value = true
	TagList.value = []
	index.value = 0

	try {
		const res = await getTypeList()
		getMyCommunty(1, 20).then(res => {
			console.log('获取个人社群')
			console.log(res)
			myCommunity.value = res.data.data.rows
		}).catch(err => {
			console.log(err)
		})
	} catch (err) {
		console.log(err)
	} finally {
		setTimeout(() => {
			triggered.value = false
		}, 1000)
	}
}

// lowerBottom 方法
const lowerBottom = async () => {
	console.log('lowerBottom22')
	getTypeList()
}



// 截断字符串的辅助函数
const truncateString = (str: string, length = 10) => {
	return str.length > length ? str.substring(0, length) + '···' : str
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1200px) {
	.pipei-card {
		padding: 15px;
	}
}

.input {
	margin: 0 auto;
	margin-top: 2vh;
	border: 2px solid transparent;
	width: 15em;
	height: 2.5em;
	padding-left: 0.8em;
	outline: none;
	overflow: hidden;
	background-color: #F3F3F3;
	border-radius: 10px;
	transition: all 0.5s;
}

.input:hover,
.input:focus {
	border: 2px solid #4A9DEC;
	// box-shadow: 0px 0px 0px 7px rgb(74, 157, 236, 20%);
	background-color: white;
}


.tag {
	width: 70vw;
	background: url('@/static/Communty_tag.png');
}

.black-brackground {
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.1;
}

.CommuntyCart {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 3vh;
	padding-bottom: 3vh;
	border-radius: 12px;
	width: 180px;
	height: 140px;
	text-align: center;
	margin-bottom: 3vh;
	position: relative;
	// background: linear-gradient(229.7deg, rgba(253, 151, 120, 1) 0%, rgba(233, 21, 89, 1) 100%);
	background: url('http://8.146.208.139:4000/avator/1715601111449.png');
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
}

.CardList {

	width: 100%;
	display: flex;

	justify-content: space-evenly;
	flex-wrap: wrap;
	padding-top: 2vh;

}
</style>